<template>
  <div style="background: #f2f2f2;padding: 4px 12px;border-radius: 4px;">
    文本内容：<input v-model="content" v-bind="contentAttr" @change="(ev) => handleChange((ev.target as HTMLInputElement).value)">
    <div class="useFieldArray">
      <div class="append" v-for="field in fields">
        {{field.value}}
        useFieldArray: <input type="text"  :key="field.key" v-model="field.value">
      </div>
    </div>
    <button type="button" @click="push('')">Add</button>
    <button type="button" @click="push({name:Math.random()})">Add</button>
    <div>
      {{values}}
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineProps, defineEmits} from "vue";
import {useForm, useFieldArray } from "vee-validate";
import {MaterialType} from "@/types/material.type";

const props = defineProps<{material:MaterialType}>();
const { values, defineField } = useForm(
    {
      initialValues: {
        content: props?.material?.props?.content
      }
    }
);
const [content, contentAttr]= defineField('content');

const emit = defineEmits<{(event: 'change', material: MaterialType):void}>();
const handleChange = (content: any) =>{
  const newMaterial = {...props?.material, props:{content}}
  emit('change', newMaterial);
}

const { remove, push, fields } = useFieldArray('fields');

</script>

<style scoped>

</style>
